// import { useState, useEffect } from 'react'
// import { useDispatch, useSelector } from 'react-redux'
// import { Button, Form, Input, Select } from 'antd'
// // 组件导入
// import GlobalUpload from '@/commponents/common/GlobalUpload'

// // action导入
// import {
//   getProductCategoryAction, // 获取商品分类列表
//   getFreightListAction, // 获取运费模板列表
//   getProductSpecAction, // 获取规格列表
// } from '@/reducers/productManage'

// // 整个规格列表因为逻辑太复杂，分拆成多个组件
// import ProductSpec from '@/components/product/productSpec'

// // import '@/assets/less/product/productAdd.less'
// import axios from 'axios'

// const { Item } = Form

// /**
//  * 添加商品第一页，当前页负责收集添加商品的必填项
//  * @param {*} props
//  * @returns
//  */
// export default function ProductForm(props) {
//   // 获取dispatch方法
//   const dispatch = useDispatch()
//   // 使用useSelector获取store中的内容
//   const { category, freightList, specList } = useSelector(
//     // 参数解构
//     ({ productManage: { category, freightList, productSpecs } }) => ({
//       // 商品分类列表
//       category: category.map(item => ({
//         label: item.cate_name,
//         value: item.id,
//       })),
//       // 运费模板列表
//       freightList: freightList.map(item => ({
//         label: item.name,
//         value: item.id,
//       })),
//       // 规格列表
//       specList: productSpecs.map(item => ({
//         label: item.rule_name,
//         value: item.id,
//         list: item.rule_value,
//       })),
//     })
//   )
//   // 商品轮播图最大数量
//   const [maxCount] = useState(10)
//   // 表单
//   const [form] = Form.useForm()

//   console.log('props或组件状态变化，重新渲染组件')

//   useEffect(() => {
//     console.log('检测useSelector是否为强缓存')
//   }, [category, freightList, specList])

//   useEffect(() => {
//     console.log('检测dispatch是否为强缓存')
//     // 派发action,获取数据
//     dispatch(getProductCategoryAction())
//     dispatch(getFreightListAction())
//     dispatch(getProductSpecAction())
//     // eslint-disable-next-line react-hooks/exhaustive-deps
//   }, [dispatch])

//   /**
//    * 校验不通过
//    */
//   const validateFailed = (values, errorFields, outOfDate) => {
//     console.log(values, errorFields, outOfDate, '校验失败')
//   }

//   /**
//    * 属性变化
//    * @param {*} changedValues
//    * @param {*} allValues
//    */
//   const valuesChange = (changedValues, allValues) => {
//     console.log(changedValues, '表单数据发生变化')
//   }

//   return (
//     <div className="add-first-form-wrap">
//       <Form
//         form={form}
//         onFinish={props.onFinish}
//         onFinishFailed={validateFailed}
//         onValuesChange={valuesChange}
//       >
//         {/* 商品名称 */}
//         <Item
//           name="store_name"
//           label="商品名称"
//           rules={[{ required: true, message: '请输入商品名称' }]}
//         >
//           <Input className="half" />
//         </Item>
//         {/* 分类下拉 */}
//         <Item
//           name="category"
//           label="商品分类"
//           rules={[{ required: true, message: '请选择商品分类' }]}
//         >
//           <Select
//             className="half"
//             options={category}
//             placeholder="请选择商品分类"
//           />
//         </Item>
//         {/* 单位名称 */}
//         <Item
//           name="unit_name"
//           label="单位"
//           rules={[{ required: true, message: '请填写单位名称' }]}
//         >
//           <Input className="half" />
//         </Item>
//         {/* 上传封面图片 */}
//         <Item
//           name="image"
//           label="商品封面"
//           rules={[{ required: true, message: '请上传商品封面图片' }]}
//         >
//           <GlobalUpload />
//         </Item>
//         {/* 上传轮播图列表 */}
//         <Item
//           name="slider_image"
//           label={
//             <div className="multiple-line">
//               <p className="title">商品轮播图</p>
//               <p className="sub-title">(最多{maxCount}张)</p>
//             </div>
//           }
//           rules={[{ required: true, message: '请上传商品轮播图' }]}
//         >
//           <GlobalUpload maxCount={maxCount} />
//         </Item>
//         {/* 商品规格选择 因此处逻辑较复杂 包含规格选择、规格输入、规格表单、规格列表等相关组件均由productSpec组件统一管理 */}
//         <ProductSpec specList={specList} form={form} />
//         {/* 运费模板 */}
//         <Item
//           name="freight"
//           label="运费模板"
//           rules={[{ required: true, message: '请选择运费模板' }]}
//         >
//           <Select
//             className="half"
//             options={freightList}
//             placeholder="请选择运费模板"
//           />
//         </Item>
//         {/* 提交按钮，激活onFinish事件 */}
//         <Item>
//           <Button type="primary" htmlType="submit">
//             下一步
//           </Button>
//         </Item>
//       </Form>
//     </div>
//   )
// }

// axios
//   .get('http://loan-test.yinshuitong.com/backorg/bill/download/invoice', {})
//   .then(result => {
//     // 文件流
//     const excelBlob = result.data
//     if ('msSaveOrOpenBlob' in navigator) {
//       // Microsoft Edge and Microsoft Internet Explorer 10-11
//       window.navigator.msSaveOrOpenBlob(excelBlob, 'invoice.pdf')
//     } else {
//       // 创建一个a标签
//       const elink = document.createElement('a') // 创建a标签
//       // 将文件流转换成一个blob对象
//       const blob = new Blob([excelBlob])
//       // 让这个链接的地址指向这个文件流
//       elink.href = URL.createObjectURL(blob)
//       // 将a标签插入页面
//       document.body.appendChild(elink)
//       // 用js去模拟激活a标签的点击事件
//       elink.click()
//       // 清除掉a标签
//       document.body.removeChild(elink)
//     }
//   })
import React from 'react'

export default function AddProduceFirst() {
  return <div></div>
}
